<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>发布动态</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weui.css" />
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weuix.css" />
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.min.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.weui.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/macy.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/php.js"></script>
    <script src="/lobstersdk/lobster.js"></script>
    <script src="/jslib/template-web.js"></script>
    <script src="../js/lobsterupload.js"></script>
    <script src="/jslib/jquery-3.4.1.min.js"></script>
    <script src="../js/flyzoom.js"></script>

    <style>
        /* #container {
            width: 100%;
            height: 100%;
        } */
        #locationlist {
            /* overflow-y: scroll;
            white-space: nowrap */
        }

        #topiclist {
            /* overflow-y: scroll;
            white-space: nowrap */
        }

        /*去除滚动条*/
        ::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>

<body ontouchstart>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input id="Title" class="weui-input" placeholder="写标题更有可能被推荐" max-length="10" type="text">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <textarea id="Content" class="weui-textarea" name="Content" placeholder="分享你的运动心得和经验吧~"
                    rows="3"></textarea>
            </div>
        </div>
        <div id="imgListdiv">

        </div>
        <div class="weui-cell weui-cell_access" id="topic">
            <div class="weui-cell__hd"><img src="../images/topic.png" alt=""
                    style="width:20px;margin-right:5px;display:block"></div>
            <div class="weui-cell__bd">
                <p>添加话题</p>
            </div>
            <div class="weui-cell__ft" id="topictxt">选择合适的话题会有更多赞~</div>
        </div>
        <div class="weui-cell weui-cell_access" id="location">
            <div class="weui-cell__hd"><img src="../images/location.png" alt=""
                    style="width:20px;margin-right:5px;display:block"></div>
            <div class="weui-cell__bd">
                <p>添加位置</p>
            </div>
            <div class="weui-cell__ft" style="width: 240px;" id="locationtxt"></div>
        </div>
        <div class="weui-cell weui-cell_access" id="limit">
            <div class="weui-cell__hd"><img src="../images/user.png" alt=""
                    style="width:20px;margin-right:5px;display:block"></div>
            <div class="weui-cell__bd">
                <p>选择可见</p>
            </div>
            <div class="weui-cell__ft" id="limittxt">全部</div>
        </div>
    </div>
    <div class="weui-btn-area">
        <a href="javascript:void(0)" id="save" class="weui-btn weui-btn_primary">发布</a>
    </div>
    <div id="topicpopup" class='weui-popup__container'>
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="toolbar">
                <div class="toolbar-inner">
                    <a href="javascript:;" class="picker-button close-popup">关闭</a>
                    <h1 class="title">选择主题</h1>
                </div>
            </div>
            <div class="modal-content">
                <div class="weui-cell">
                    <div class="weui-cell__bd" style="display: flex;align-items: center;">
                        <input id="topicsearchkey" class="weui-input" placeholder="请输入主题" max-length="10" type="text">
                        <a id="topicbtn" style="width: 100px;" href="javascript:void(0);"
                            class="weui-btn weui-btn_mini weui-btn_primary">搜索</a>
                    </div>
                </div>
                <div class="weui-cells" id="topiclist">

                </div>
            </div>
        </div>
    </div>

    <div id="locationpopup" class='weui-popup__container'>
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="toolbar">
                <div class="toolbar-inner">
                    <a href="javascript:;" class="picker-button close-popup">关闭</a>
                    <h1 class="title">选择地址</h1>
                </div>
            </div>
            <div class="modal-content">
                <div class="weui-cell">
                    <div class="weui-cell__bd" style="display: flex;align-items: center;">
                        <input id="searchkey" class="weui-input" placeholder="请输入文本" max-length="10" type="text">
                        <a id="locationbtn" style="width: 100px;" href="javascript:void(0);"
                            class="weui-btn weui-btn_mini weui-btn_primary">搜索</a>
                    </div>
                </div>
                <div class="weui-cells" id="locationlist">

                </div>
            </div>
        </div>
    </div>
    <div id="limitpopup" class='weui-popup__container popup-bottom'>
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="toolbar">
                <div class="toolbar-inner">
                    <a href="javascript:;" class="picker-button close-popup">关闭</a>
                    <h1 class="title">选择可见</h1>
                </div>
            </div>
            <div class="modal-content">
                <div class="weui-cells">
                    <div data-item="1" class="weui-cell weui-cell_access limititem">
                        <div class="weui-cell__bd">
                            <p>全部</p>
                        </div>
                        <div class="weui-cell__ft">
                        </div>
                    </div>
                    <div data-item="2" class="weui-cell weui-cell_access limititem">
                        <div class="weui-cell__bd">
                            <p>个人</p>
                        </div>
                        <div class="weui-cell__ft">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: '67586deca6e7690749c30f175a822b12',
        }
    </script>
    <script src="https://webapi.amap.com/maps?v=1.4.5&key=0205d7a6c8ec5a4e9f563f996325feb3"></script>
</body>

</html>
<script id="locationtemp" type="text/html">
    {{each list item}}
    <div data-item="{{item}}" class="weui-cell weui-cell_access locationitem">
        <div class="weui-cell__bd">
            {{item.district}}{{item.name}}
        </div>
        <div class="weui-cell__ft">
        </div>
    </div>
    {{/each}}
</script>
<script type="text/html" id="topictemp">
    {{each list item }}
    <div  data-item="{{item}}" class="weui-cell weui-cell_access topicitem">
        <div class="weui-cell__bd">
            <p>{{item.TopicName}}</p>
        </div>
        <div class="weui-cell__ft">{{item.LookersCount}}围观</div>
    </div>
    {{/each}}
</script>
<script>
    lobsterh5.main({
        data: {
            imgList: [],
            dynamic: {
                Title: '',
                TopicId: 0,
                DelFlag: 0,
                Content: '',
                Limit: 1,
                DynamicType: 1,
            },
            wordlist: [],
        },
        //初始化页面
        pageload: function () {
            var self = this;
            jQuery.noConflict();
            self.data.dynamic.DynamicType = lobsterh5.GetUrlParam("type");
            if (self.data.dynamic.DynamicType == 1)
                $("title").text("发布图文动态");
            else
                $("title").text("发布视频动态");
            self.initevent();
            self.autoInput("");
            self.getTopicList();
            self.getShieldWordList();
        },
        //初始化事件
        initevent: function () {
            var self = this;
            $("#imgListdiv").lobsterupload({
                onRemoveSuccess: function (data) {
                    console.log("removesuccess", data);
                    var arr = self.data.imgList;
                    arr.forEach((a, index) => {
                        if (data == a) {
                            arr.splice(index, 1);
                        }
                    });
                    self.data.imgList = arr;
                },
                onUploadSuccess: function (data) {
                    self.data.imgList.push(data);
                    // jQuery("#imgListdiv").FlyZommImg({
                    //     rollSpeed: 100,//切换速度
                    //     miscellaneous: false,//是否显示底部辅助按钮
                    //     closeBtn: true,//是否打开右上角关闭按钮
                    //     hideClass: 'hideImg',//不需要显示预览的 class
                    //     imgQuality: 'original',//图片质量类型  thumb 缩略图  original 默认原图
                    //     slitherCallback: function (direction, DOM) {//左滑动回调 两个参数 第一个动向 'left,firstClick,close' 第二个 当前操作DOM 
                    //         // 为了一开始居中显示
                    //         $('.fly-zoom-box-img').css('width', '100%').css('height', 'auto').css('top', 0).css('bottom', 0).css('margin', 'auto');
                    //     }
                    // });
                },
                onUploadFail: function (data) {
                    console.log("uploadfail", data);
                },
                type: self.data.dynamic.DynamicType,
                max: self.data.dynamic.DynamicType == 1 ? 9 : 1,
                size: self.data.dynamic.DynamicType == 1 ? 1 : 5,
            })

            $("#topic").click(function () {
                $("#topicpopup").popup();
            })
            $("#limit").click(function () {
                $("#limitpopup").popup();
            })
            $("#location").click(function () {
                $("#locationpopup").popup();
            })
            $("#locationbtn").click(function () {
                self.autoInput($("#searchkey").val());
            })
            $("#topicbtn").click(function () {
                self.getTopicList();
            })
            $("#locationlist").on("click", ".locationitem", function () {
                var item = $(this).data("item");
                self.data.dynamic.Location = item.district + item.name;
                $("#locationtxt").text(self.data.dynamic.Location)
                $.closePopup();
            });
            $("#topiclist").on("click", ".topicitem", function () {
                var item = $(this).data("item");
                self.data.dynamic.TopicId = item.TopicId;
                $("#topictxt").text(item.TopicName)
                $.closePopup();
            });
            $(".limititem").click(function () {
                var item = $(this).data("item");
                self.data.dynamic.Limit = item;
                $("#limittxt").text(item == 1 ? "全部" : "个人");
                $.closePopup();
            })
            $("#save").click(function () {
                self.data.dynamic.Title = $("#Title").val();
                self.data.dynamic.Content = $("#Content").val();
                if (!self.data.dynamic.Title) {
                    $.toast("请填写标题", "text");
                    return;
                }
                if (!self.data.dynamic.Content) {
                    $.toast("请填写内容", "text");
                    return;
                }
                var filter = self.data.wordlist.filter(a => {
                    return self.data.dynamic.Title.indexOf(a.Word) > -1;
                })
                if (filter.length > 0) {
                    $.toast('标题存在敏感词[' + filter[0].Word + ']');
                    return;
                }
                var filter = self.data.wordlist.filter(a => {
                    return self.data.dynamic.Content.indexOf(a.Word) > -1;
                })
                if (filter.length > 0) {
                    $.toast('内容存在敏感词[' + filter[0].Word + ']');
                    return;
                }
                // if (self.data.imgList.length == 0) {
                //     $.toast('请上传附件');
                //     return;
                // }
                var attachList = [];
                self.data.imgList.forEach(a => {
                    attachList.push({
                        Type: self.data.dynamic.DynamicType,
                        Url: a,
                        DelFlag: 0,
                        Duration: 0,
                        Width: 0,
                        Height: 0,
                    })
                });
                self.data.dynamic.UserId = localStorage.getItem("userId");
                self.data.dynamic.AttachList = JSON.stringify(attachList);
                $.showLoading("发布中");
                lobsterh5.POST("/lowcode/APP20211203093514696/name/?fun=Dynamic.SaveDynamic", self.data.dynamic).then(res => {
                    $.hideLoading();
                    $.toast("发布成功", "text");
                    setTimeout(() => {
                        location.href = "../index.html?tabindex=1";
                    }, 500);
                }).catch(res => {
                    $.hideLoading();
                    console.log(res.msg || res);
                    $.toast(res.msg || res, 'forbidden');
                })
            })
        },
        autoInput(keywords) {
            console.log(keywords);
            AMap.plugin('AMap.Autocomplete', function () {
                // 实例化Autocomplete
                var autoOptions = {
                    city: '全国'
                }
                var autoComplete = new AMap.Autocomplete(autoOptions);
                autoComplete.search(keywords, function (status, result) {
                    console.log(result);
                    if (result.info == "OK") {
                        var list = result.tips.filter(a => { return a.district != "" && a.name != "" });
                        var html = template("locationtemp", {
                            list: result.tips
                        });
                        $("#locationlist").html(html);
                    }
                })
            })
        },
        getTopicList() {
            var self = this;
            lobsterh5.GET("/lowcode/APP20211203093514696/name/?fun=Dynamic.GetTopicList", {
                searchkey: $("#topicsearchkey").val(),
                topictype: -1,
                page: 1,
                limit: 10
            }).then(res => {
                res.forEach(a => {
                    a.LookersCount = self.convertcount(a.LookersCount);
                })
                var html = template("topictemp", { list: res, });
                $("#topiclist").html(html);
            })
        },
        convertcount(count) {
            var count = count || 0;
            if (count >= 10000) {
                count = (count / 10000).toFixed(1) + 'w';
            }
            return count;
        },
        getShieldWordList() {
            var self = this;
            lobsterh5.GET("/lowcode/APP20211203093514696/name/?fun=Dynamic.GetShieldWordList", {
            }).then(res => {
                self.data.wordlist = res.list;
            })
        }
    }); 
</script>